<template>
    <div>
        <el-row :gutter="20" style="line-height:50px;background-color: aliceblue;">
            <el-col :span="20" :offset="2" class="head">正在和{{ toInfo.username }}({{ toInfo.account }})聊天</el-col>
            <el-col :span="20" :offset="2" class="body">
                <el-row :gutter="20" style="line-height:40px">
                    <div v-for="(li, index) in data" :key="index">
                        <el-col :span="24">
                            <div v-if="li.fromAccount == fromInfo.account">
                                <div class="own">
                                    {{ li.message }}</div>
                            </div>
                            <div v-else>
                                <div class="it">
                                    {{ li.message }}</div>
                            </div>
                        </el-col>
                    </div>
                </el-row>
            </el-col>
            <el-col :span="20" :offset="2" class="input">
                <el-row :gutter="20">
                    <el-col :span="22">
                        <el-input type="textarea" v-model="input" :rows="4" class="toInput"></el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="success" class="submit">发送</el-button>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <div id="triangle" @click="backTop"></div>
    </div>
</template>
<script>
import { getBeforeRecord, saveRecord } from '@/utils/modules/chat.js'
export default {
    mounted() {
        this.toId = this.$route.query.toId
        this.fromId = this.$route.query.fromId
        //  sign 0---游客  1--员工
        this.fromSign = this.$route.query.fromSign
        this.toSign = this.$route.query.toSign
        // console.log(this.toId+" "+this.fromId)
        // 员工聊天界面
        this.initBeforeData()
        setTimeout(()=>{
            this.initWebsocket()
            this.backTop()
        },400)
    },
    data() {
        return {
            fromInfo: '',
            toInfo: '',
            fromId: '',
            toId: '',
            fromSign:0,
            toSign: 0,
            // toUsername:'',
            input: '',
            data: []
        }
    },
    methods: {
        backTop() {
            let height = document.querySelector('.body')
            height.scrollTo(0,height.clientHeight)
        },
        initBeforeData() {
            getBeforeRecord({ 'fromId': this.fromId, 'toId': this.toId,'fromSign':this.fromSign,'toSign':this.toSign }).then(res => {
                this.data = res.data.itemList
                this.fromInfo = res.data.etc.fromInfo
                this.toInfo = res.data.etc.toInfo
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: err.message,
                    showClose: true
                })
            })
        },
        initWebsocket() {
            let ws = new WebSocket('ws://localhost:8888/chat')
            let _that = this
            ws.onopen = function () {
                console.log('连接成功')
            }
            ws.onmessage = function (e) {
                let dataStr = e.data
                let receiveRes = JSON.parse(dataStr)
                if (receiveRes.system) {
                    for (let i = 0; i < receiveRes.message.length; i++) {
                        if (receiveRes.message[i] == _that.toInfo.account) {
                            _that.$message({
                                type: 'success',
                                message: receiveRes.message[i] + '已上线',
                                showClose: true
                            })
                        }
                    }
                } else {
                    _that.data.push({
                        // 信息发送者
                        fromAccount: receiveRes.fromAccount,
                        // 页主
                        toAccount: _that.fromInfo.account,
                        message: receiveRes.message
                    })
                    setTimeout(()=>{
                        _that.backTop()
                    },2)
                }

            }
            ws.onclose = function () {
                console.log('关闭连接')
            }
            ws.onerror = function () {
                console.log("连接失败")
            }
            let btn = document.querySelector('.submit')
            btn.addEventListener('click', function () {
                if (_that.input.trim() == "") {
                    alert('请输入内容')
                } else {
                    let sendData = {
                        toPersonAccount: _that.toInfo.account,
                        message: _that.input.trim()
                    }
                    ws.send(JSON.stringify(sendData))
                    saveRecord({ 'fromAccount': _that.fromInfo.account, 'toAccount': _that.toInfo.account, 'message': _that.input.trim() }).then(res => {
                        _that.data.push({
                            fromAccount: _that.fromInfo.account,
                            toAccount: _that.toInfo.account,
                            message: _that.input.trim()
                        })
                        _that.input = ''
                    }).catch(err => {
                        _that.$message({
                            type: 'error',
                            message: err.message,
                            showClose: true
                        })
                    }).then(()=>{
                        _that.backTop()
                    })
                }
            })
        }
    },
}
</script>
<style>
.head {
    text-align: center;
    font-weight: 600;
    border: 1px solid black;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: rgb(84, 151, 173);
}

.body {
    height: 520px;
    background-color: aliceblue;
    border: 1px solid black;
    overflow-y: scroll;
}

.body::-webkit-scrollbar {
    display: none;
}

.input {
    background-color: aliceblue;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid black;
    height: 120px;
}

.own {

    float: right;
    border-color: aqua;
    border: 1px solid black;
    border-radius: 5px;
    background-color: greenyellow;
    margin-top: 10px;
    margin-right: 10px;
    min-width: 200px;
    text-align: right;
}

.it {
    float: left;
    border-color: aqua;
    border: 1px solid black;
    border-radius: 3px;
    background-color: white;
    margin-top: 10px;
    min-width: 200px;
    margin-left: 10px;
    text-align: left;
}
#triangle {
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-bottom-color: #000;
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* display: none; */
}
</style>